<template>
  <div>
    <div class="card" style="line-height: 30px">
      <div>欢迎进入企业开发管理！</div>

      <div><h3>项目进度：</h3></div>
      <div class="demo-progress">
        <el-progress :percentage="data.percentage" :stroke-width="15" striped />
        <el-row>
          <el-col :span="8"><el-statistic title="总的项目" :value="data.total_project" /></el-col>
          <el-col :span="6"><el-statistic title="已完成项目" :value="data.success_project" /></el-col>
          <el-col :span="6"><el-statistic title="未完成项目" :value="data.failed_project"></el-statistic></el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"
import { ref } from 'vue';

const store=useStore()

const data=reactive({
  //从全局变量获取employeeInfo信息存入employee
  employee:store.state.employeeInfo,
  percentage:0,
  total_project:0,
  success_project:0,
  failed_project:0,

})

//load()显示项目清单
const load=()=>{
   //employee为表单数据，此时需要转到json字符串形式
  const employeeData= JSON.stringify(data.employee);
  const formdata=new FormData()
  formdata.append('employee',employeeData)
  axios.post('http://localhost:8088/GET/ProjectInfo',formdata).then(res=>{
    // console.log(res.data.data.ProjectInfo);
    data.total_project=res.data.data.ProjectInfo.length
    for(let i=0;i<res.data.data.ProjectInfo.length;i++){
      if(res.data.data.ProjectInfo[i].project_status==3){
        data.success_project++;
      }
    }
    data.failed_project=data.total_project-data.success_project
    data.percentage = parseFloat(((data.success_project / data.total_project) * 100).toFixed(1));
  })
}

load()
</script>




<style scoped>
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 0;
  padding-bottom:0;
  text-align: left;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>